Integrated Development Environments (IDEs) are software tools that allow a developer (e.g., a web developer) to create web pages, websites, interactive applications, and the like for use by end users (e.g., visitors to websites). Various IDEs exist in the current marketplace, such as DREAMWEAVER™, available from MACROMEDIA INC. of San Francisco, Calif. and FRONTPAGE®, available from Microsoft Corporation. DREAMWEAVER™ is an IDE that allows web developers to design Hypertext Markup Language (HTML) web pages in both a code editor and a graphical-based design time environment. DREAMWEAVER™ also allows the developer to design in other languages, such as, for example, Extensible Markup Language (XML), Extensible HTML (XHTML), Active Server Page (ASP), COLDFUSION™ Markup Language (CFML™), and the like.
An IDE may allow a developer to create a document in an environment that includes both a text-based code view and a graphical-based design view. The code view renders the source code as text in a portion of the screen and allows the developer to see and manipulate the source code in the document file. For example, the developer may write and edit HTML or Cascading Style Sheets (CSS) code in the code view. The design view, on the other hand, is a What You See Is What You Get (WYSIWYG) view of the document that allows the user to visually manipulate the interpreted and graphically laid-out version of the document, such as, for example, by dragging, dropping, cutting, and pasting visual components. As the developer works, changes to the document are reflected in both the code view and the design view.
Further, an IDE may support a code collapse feature. Code collapse, or code folding, in this example, is the ability to visually replace portions of the text in a document with an image or button, in effect hiding it, so that it does not take up much screen space. Users typically employ such a feature to hide portions of the code that they are not interested in or to bring two or more portions of the code closer together so that scrolling is not necessary to view them at the same time.
FIG. 1 is an illustration of example screen 100 from an IDE, including example code view 110. Code views, such as code view 110, are renderings of the source code as text for inspection, creation, and manipulation by the user. Example code view 110 is conceptual in that actual code is not shown thereon, but is understood to be represented by the word, “code.” FIG. 2 is an illustration of example screen 200 from an IDE, including example code view 110. In screen 200, the user has selected code B 201. A user usually marks a region of source code (e.g., code 201) in code view 110 that he or she wants to collapse or hide. The marking may be performed by using a mouse or other pointing device to select code. The developer then indicates to the program that he or she desires to collapse selected code 201, for example, by clicking on widget 202 in the gutter area of code view 110. Internally, the program notates the region by dropping markers that capture the range that was selected—a marker at the beginning of the selection and a marker at the end of the selection. FIG. 3 is an illustration of example screen 300 from an IDE, including example code view 110. As shown in screen 300, when the IDE re-renders code view 110, it renders code collapse button 301 in the place of selected code 201.
Some IDEs also support an automatic code expand feature. In auto-expand, whenever a piece of collapsed code is selected, such as by the developer performing a FIND/REPLACE or selecting a corresponding visual object in the design view, the program automatically expands the collapsed code. When that piece of code is no longer selected, the program automatically recollapses the code.
When working in an IDE with code collapse and auto-expand, a developer may not realize that currently selected code is otherwise collapsed, and when the developer selects other code, it causes the auto-expanded code to recollapse unexpectedly. As a result, the developer may be distracted or lose his or her place in the code view. No IDEs that provide a code collapse feature with auto-expand provide a visual indication to the developer that certain code in the code view is auto-expanded from a collapsed state.